<template>
  <van-popup
    v-model:show="visible"
    :closeable="false"
    position="bottom"
    @close="handleClose"
  >
    <van-picker
      v-model="selectedValues"
      :title="placeholder"
      :columns="options"
      :columns-field-names="{
        text: labelField,
        value: valueField,
      }"
      @confirm="handleOk"
      @cancel="handleClose"
    />
  </van-popup>
</template>

<script lang="ts" setup>
  import { ref, withDefaults, defineProps } from 'vue';

  interface Props {
    value: string;
    options: any[];
    valueField?: string;
    labelField?: string;
    placeholder: string;
    close: () => void;
    resolve: (x?: any) => void;
  }
  const props = withDefaults(defineProps<Props>(), {
    close: () => {
      return () => {};
    },
    resolve: () => {
      return () => {};
    },
  });

  let type = '';
  const loading = ref<boolean>(false);
  const visible = ref<boolean>(true);

  const selectedValues = ref<string[]>([props.value]);

  let result = '';
  const handleOk = () => {
    result = selectedValues.value[0];
    handleSuccess();
  };

  const handleSuccess = () => {
    type = 'reslove';
    visible.value = false;
  };

  const handleClose = () => {
    loading.value = false;
    if (type === 'reslove') {
      props.resolve(result);
    } else {
      props.close();
    }
  };
</script>

<style lang="less"></style>
